<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="java.sql.*" %>
<!doctype html>
<html lang="ch">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="左右结构项目，属于大人员的社交工具">
        <meta name="keywords" content="左右结构项目 社交 占座 ">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>图书借阅管理后台</title>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            $(function() {
                $(".meun-item").click(function() {
                    $(".meun-item").removeClass("meun-item-active");
                    $(this).addClass("meun-item-active");
                    var itmeObj = $(".meun-item").find("img");
                    itmeObj.each(function() {
                        var items = $(this).attr("src");
                        items = items.replace("_grey.png", ".png");
                        items = items.replace(".png", "_grey.png")
                        $(this).attr("src", items);
                    });
                    var attrObj = $(this).find("img").attr("src");
                    ;
                    attrObj = attrObj.replace("_grey.png", ".png");
                    $(this).find("img").attr("src", attrObj);
                });
                $("#topAD").click(function() {
                    $("#topA").toggleClass(" glyphicon-triangle-right");
                    $("#topA").toggleClass(" glyphicon-triangle-bottom");
                });
                $("#topBD").click(function() {
                    $("#topB").toggleClass(" glyphicon-triangle-right");
                    $("#topB").toggleClass(" glyphicon-triangle-bottom");
                });
                $("#topCD").click(function() {
                    $("#topC").toggleClass(" glyphicon-triangle-right");
                    $("#topC").toggleClass(" glyphicon-triangle-bottom");
                });
                $(".toggle-btn").click(function() {
                    $("#leftMeun").toggleClass("show");
                    $("#rightContent").toggleClass("pd0px");
                })
            })
        </script>
        <!--[if lt IE 9]>
  <script src="js/html5shiv.min.js"></script>
  <script src="js/respond.min.js"></script>
<![endif]-->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/common.css" />
        <link rel="stylesheet" type="text/css" href="css/slide.css" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="css/flat-ui.min.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.nouislider.css">
    </head>

    <body>
        <div id="wrap">
            <!-- 左侧菜单栏目块 -->
            <div class="leftMeun" id="leftMeun">
                <div id="logoDiv">
                    <p id="logoP"><img id="logo" alt="左右结构项目" src="images/logo.png"><span>图书管理借阅系统</span></p>
                </div>
                <div id="personInfor">
                    <p id="userName"></p>
                    <p><span>欢迎登陆</p>
                    <p>
                        <a href="LogoutServlet">退出登录</a>
                    </p>
                </div>
                <div class="meun-title">账号管理</div>

                <div class="meun-item" href="#chan" aria-controls="chan" role="tab" data-toggle="tab"><img src="images/icon_change_grey.png">修改密码</div>
                <div class="meun-title">书籍管理</div>
                <div class="meun-item" href="#scho" aria-controls="scho" role="tab" data-toggle="tab"><img src="images/icon_house_grey.png">书籍查询</div>
                
                <div class="meun-item" href="#stud" aria-controls="stud" role="tab" data-toggle="tab"><img src="images/icon_card_grey.png">违约信息</div>
                
            </div>
            <!-- 右侧具体内容栏目 -->
            <div id="rightContent">
                <a class="toggle-btn" id="nimei">
                    <i class="glyphicon glyphicon-align-justify"></i>
                </a>
                <!-- Tab panes -->
                <div class="tab-content">

            <!-- 修改密码模块 -->
            <div role="tabpanel" class="tab-pane" id="chan">
                <div style="padding: 50px 0;margin-top: 50px;background-color: #fff; text-align: right;width: 420px;margin: 50px auto;">
                    <form class="form-horizontal" action="NewPassword" method="post">
                    <div class="form-group">
                            <label for="sKnot" class="col-xs-4 control-label">用户账号：</label>
                            <div class="col-xs-5">
                                <input type="" class="form-control input-sm duiqi" id="sKnot" name="userName" placeholder="" style="margin-top: 7px;">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="sKnot" class="col-xs-4 control-label">原密码：</label>
                            <div class="col-xs-5">
                                <input type="" class="form-control input-sm duiqi" id="sKnot" name="oldPassword" placeholder="" style="margin-top: 7px;">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="sKnot" class="col-xs-4 control-label">新密码：</label>
                            <div class="col-xs-5">
                                <input type="" class="form-control input-sm duiqi" id="sKnot" name="newPassword" placeholder="" style="margin-top: 7px;">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="sKnot" class="col-xs-4 control-label">重复密码：</label>
                            <div class="col-xs-5">
                                <input type="" class="form-control input-sm duiqi" id="sKnot" name="newPassword_one" placeholder="" style="margin-top: 7px;">
                            </div>
                        </div>
                        <div class="form-group text-right">
                            <div class="col-xs-offset-4 col-xs-5" style="margin-left: 169px;">
                                <button type="reset" class="btn btn-xs btn-white">取 消</button>
                                <button type="submit" class="btn btn-xs btn-green">保存</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
            <!--地区管理模块-->
            <div role="tabpanel" class="tab-pane" id="scho">
                <div class="data-div">
                    <div class="row tableHeader">
                        <div class="col-xs-1 ">
                            序号
                        </div>
                        <div class="col-xs-2 ">
                            书籍名称
                        </div>
                        <div class="col-xs-2">
                            总量
                        </div>
                        <div class="col-xs-2">
                            余量
                        </div>
                        <div class="col-xs-2">
                            书籍编码
                        </div>
                        <div class="col-xs-2">
                            类型
                        </div>
                    </div>
                    <%
    				try{
    					Connection con = null;
         				Statement stmt = null;
         				Statement stmt_1 = null;
         				ResultSet rs = null;
    					Class.forName("com.mysql.cj.jdbc.Driver"); //// 驱动程序名
    					String url = "jdbc:mysql://localhost:3306/htuser?serverTimezone=UTC "; // 数据库名
    					String username = "root"; // 数据库用户名
    					String password1 = "123456"; // 数据库用户密码
    					con = DriverManager.getConnection(url, username, password1);
    					stmt = con.createStatement();
    					stmt_1=con.createStatement();
    					String sql = "select * from book";
    					rs = stmt.executeQuery(sql);
    					while(rs.next()){
        	    	 		out.print(" <div class="+"tablebody"+">");
        	    	 		out.print(" <div class="+"row"+">");
        	    	 			out.print("<div class="+"col-xs-1"+">"+rs.getString(1)+"</div>");
        	    	 			out.print("<div class="+"col-xs-2"+">"+rs.getString(2)+"</div>");
        	    	 			out.print("<div class="+"col-xs-2"+">"+rs.getString(3)+"</div>");
        	    	 			out.print("<div class="+"col-xs-2"+">"+rs.getString(4)+"</div>");
        	    	 			out.print("<div class="+"col-xs-2"+">"+rs.getString(5)+"</div>");
        	    	 			out.print("<div class="+"col-xs-2"+">"+rs.getString(5)+"</div>");
        	    	 		out.print("</div>");
        	    	 		out.print("</div>");
        	    	 	}
        	    		con.close();
    				}catch (Exception e){
    					out.print(e);
    				}
                    %>
                    <%-- 
                    <div class="tablebody">

                        <div class="row">
                            <div class="col-xs-1 ">
                                1
                            </div>
                            <div class="col-xs-2">
                                杭州
                            </div>
                            <div class="col-xs-1">
                                45.0
                            </div>
                            <div class="col-xs-1">
                                95.90
                            </div>
                            <div class="col-xs-2">
                                <a class="linkCcc">查看</a>
                            </div>
                            <div class="col-xs-2">
                                <a class="linkCcc">查看</a>
                            </div>
                            <div class="col-xs-2">
                                <button class="btn btn-success btn-xs" data-toggle="modal" data-target="#reviseSchool">修改</button>
                                <button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteSchool">删除</button>
                            </div>
                        </div>

                    </div>--%>

                </div>
                <!--页码块-->
                <footer class="footer">
                    <ul class="pagination">
                        <li>
                            <select>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                                <option>8</option>
                                <option>9</option>
                                <option>10</option>
                            </select>
                            页
                        </li>
                        <li class="gray">
                            共20页
                        </li>
                        <li>
                            <i class="glyphicon glyphicon-menu-left">
                            </i>
                        </li>
                        <li>
                            <i class="glyphicon glyphicon-menu-right">
                            </i>
                        </li>
                    </ul>
                </footer>
                </div>
            <!--人员管理模块-->
            <div role="tabpanel" class="tab-pane" id="stud">
                <div class="data-div">
                    <div class="row tableHeader">
                        <div class="col-xs-2 ">
                            学号
                        </div>
                        <div class="col-xs-1 ">
                            姓名
                        </div>
                        <div class="col-xs-2">
                            院系
                        </div>
                        <div class="col-xs-2">
                            时间
                        </div>
                        <div class="col-xs-2 ">
                            超时时长
                        </div>
                        <div class="col-xs-2">
                            违约次数
                        </div>
<% 
    				try{
    					Connection con = null;
         				Statement stmt = null;
         				Statement stmt_1 = null;
         				ResultSet rs = null;
    					Class.forName("com.mysql.cj.jdbc.Driver"); //// 驱动程序名
    					String url = "jdbc:mysql://localhost:3306/htuser?serverTimezone=UTC "; // 数据库名
    					String username = "root"; // 数据库用户名
    					String password1 = "123456"; // 数据库用户密码
    					con = DriverManager.getConnection(url, username, password1);
    					stmt = con.createStatement();
    					stmt_1=con.createStatement();
    					String sql = "select * from weiyue";
    					rs = stmt.executeQuery(sql);
    					while(rs.next()){
        	    	 		out.print(" <div class="+"tablebody"+">");
        	    	 		out.print(" <div class="+"row"+">");
        	    	 			out.print("<div class="+"col-xs-2"+">"+rs.getString(1)+"</div>");
        	    	 			out.print("<div class="+"col-xs-1"+">"+rs.getString(2)+"</div>");
        	    	 			out.print("<div class="+"col-xs-2"+">"+rs.getString(3)+"</div>");
        	    	 			out.print("<div class="+"col-xs-2"+">"+rs.getString(4)+"</div>");
        	    	 			out.print("<div class="+"col-xs-2"+">"+rs.getString(5)+"</div>");
        	    	 			out.print("<div class="+"col-xs-2"+">"+rs.getString(5)+"</div>");
        	    	 		out.print("</div>");
        	    	 		out.print("</div>");
        	    	 	}
        	    		con.close();
    				}catch (Exception e){
    					out.print(e);
    				}
                    %>
                    </div>

                </div>

                <!-- /.modal -->

            </div>
        </div>
    </div>
</div>
<!-- 滑块js -->
<!--	<script type="text/javascript">
        scale = function(btn, bar, title, unit) {
                this.btn = document.getElementById(btn);
                this.bar = document.getElementById(bar);
                this.title = document.getElementById(title);
                this.step = this.bar.getElementsByTagName("div")[0];
                this.unit = unit;
                this.init();
        };
        scale.prototype = {
                init: function() {
                        var f = this,
                                g = document,
                                b = window,
                                m = Math;
                        f.btn.onmousedown = function(e) {
                                var x = (e || b.event).clientX;
                                var l = this.offsetLeft;
//						var max = f.bar.offsetWidth - this.offsetWidth;
                                var max = f.bar.offsetWidth-20 ;
                                g.onmousemove = function(e) {
                                        var thisX = (e || b.event).clientX;
                                        var to = m.min(max, m.max(-2, l + (thisX - x)));
                                        f.btn.style.left = to+ 'px';
                                        f.ondrag(m.round(m.max(0, to / max) * 100), to);
                                        b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
                                };
                                g.onmouseup = new Function('this.onmousemove=null');
                        };
                },
                ondrag: function(pos, x) {
                        this.step.style.width = Math.max(0, x) +2+ 'px';
                        this.title.innerHTML = pos / 10 + this.unit + "";
                }
        }
        new scale('btn0', 'bar0', 'title0', "分钟");
        new scale('btn1', 'bar1', 'title1', "分钟");
        new scale('btn2', 'bar2', 'title2', "天");
        new scale('btn3', 'bar3', 'title3', "次");
</script>
-->
<script src="js/jquery.nouislider.js"></script>

<!-- this page specific inline scripts -->
<script>
                                                //min/max slider
                                                function huadong(my, unit, def, max) {
                                                    $(my).noUiSlider({
                                                        range: [0, max],
                                                        start: [def],
                                                        handles: 1,
                                                        connect: 'upper',
                                                        slide: function() {
                                                            var val = Math.floor($(this).val());
                                                            $(this).find(".noUi-handle").text(
                                                                    val + unit
                                                                    );
                                                            console.log($(this).find(".noUi-handle").parent().parent().html());
                                                        },
                                                        set: function() {
                                                            var val = Math.floor($(this).val());
                                                            $(this).find(".noUi-handle").text(
                                                                    val + unit
                                                                    );
                                                        }
                                                    });
                                                    $(my).val(def, true);
                                                }
                                                huadong('.slider-minmax1', "分钟", "5", 30);
                                                huadong('.slider-minmax2', "分钟", "6", 15);
                                                huadong('.slider-minmax3', "分钟", "10", 60);
                                                huadong('.slider-minmax4', "次", "2", 10);
                                                huadong('.slider-minmax5', "天", "3", 7);
                                                huadong('.slider-minmax6', "天", "8", 10);
</script>
</body>

</html>